<template>
  <div class="indexContainer">
    <img class="tipImg" :src="tipImgUrl" />
    <img class="peopleImg" :src="peopleImgUrl" />
    <div class="pics-div">
      <div class="piclr-div">
        <div class="btn1-div" @click="checkCanvasMethod('babao')">
          <img class="xiu-inner" :src="xiu_babaoImgUrl" />
          <img class="xiu-border" :src="xiuBorderImgUrl" />
        </div>
        <div class="btn2-div" @click="checkCanvasMethod('yixiu')">
          <img class="xiu-inner" :src="xiu_yixiuImgUrl" />
          <img class="xiu-border" :src="xiuBorderImgUrl" />
        </div>
      </div>
      <div class="pic3-div">
        <div class="btn3-div" @click="checkCanvasMethod('sunflower')">
          <img class="xiu-yixiu-inner" :src="xiu_sunflowerImgUrl" />
          <img class="xiu-border" :src="xiuBorderImgUrl" />
        </div>
      </div>
    </div>
    <div style="margin-top:1.2rem;flex-direction:row">
      <div style="color:#fff;font-size:12px">——请选择您要制作的非遗作品——</div>
    </div>
    <div style="margin-top:4rem;flex-direction:row">
      <img class="bottomLogoImg" :src="bottomLogoImgUrl" />
    </div>
  </div>
</template>
<script>

import peopleImgUrl from '@img/older.png'
import xiuBorderImgUrl from '@img/pic_box.png'
import xiu_babaoImgUrl from '@img/babao.png'
import xiu_yixiuImgUrl from '@img/yixiu.png'
import xiu_sunflowerImgUrl from '@img/sunflower.png'
import tipImgUrl from '@img/tip.png'
import bottomLogoImgUrl from '@img/bottom_logo.png'

export default {
  name: 'Index',
  data() {
    return {
      peopleImgUrl,
      xiuBorderImgUrl,
      xiu_babaoImgUrl,
      xiu_yixiuImgUrl,
      xiu_sunflowerImgUrl,
      tipImgUrl,
      bottomLogoImgUrl,
    }
  },
  methods: {
    checkCanvasMethod: function(image) {
      this.$router.push({ name: 'Canvas', params: { image } })
    }
  }
}

</script>
<style scoped>

</style>
